<template>
  <div class="centent">
    <div class="centent-top">
      <span class="iconfont icon-zuojiantou" @click="fun()"></span>
      <van-search
        style="width: 90%"
        v-model="value"
        placeholder="请输入搜索关键词" @click="fun3()"
      />
    </div>
    <div class="centent-centent">
      <div class="centent-left">
        <div
          v-for="(v, i) in data"
          :key="i"
          class="centext-son"
          @click="fun2(i)" ref="left"
        >
          {{ v }}
        </div>
      </div>
      <div class="centext-right">
          <div v-for="(v, i) in right" :key="i" class="centext-right-son1">
                 
                  <img v-lazy="v.imgs" alt="">
                   {{v.text}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { TreeSelect } from "vant";
import { Search } from "vant";
Vue.use(Search);
Vue.use(TreeSelect);
export default {
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
    this.$store.dispatch("getclassify", { url: "/right" });


    //第一次默认的数据
    this.right  =  this.$store.state.getclassify.arr[0] || this.right1
   
    
  },
  mounted(){
 this.$refs.left[0].style.fontSize="0.2rem"
  this.$refs.left[0].style.borderLeft="3px solid green"
   console.log(this.$store.state.getclassify.arr);
    
  },
  methods: {
    fun3(){
      this.$router.push("/Purchase/Input")
    },
      fun(){
          this.$router.go(-1)
      },
     fun2(index){
this.right =  this.$store.state.getclassify.arr[index]

 for (var i = 0; i < this.data.length; i++) {
        if (i !== index) {
          //没选中
          this.$refs.left[i].style.fontSize = "";
          this.$refs.left[i].style.borderLeft=""
        } else {
          //选中
          this.$refs.left[i].style.fontSize="0.2rem"
           this.$refs.left[i].style.borderLeft="3px solid green"
        }
      }
     }
  },
  data() {
    return {
      value: "",
      data: [
        "推荐",
        "品牌",
        "系列",
        "主题",
        "潮鞋",
        "潮服",
        "箱包",
        "美妆",
        "配饰",
        "手表",
        "数码",
      ],
     right:[

     ],
     right1:[
      {
                "text": "古驰女款包",
                "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic12.secooimg.com%2Fimgextra%2F1%2F4C6b%2F10%2F10%2F1Z6sfHfdda17b020f949bb8478e3a7e0ab7d89.jpg&refer=http%3A%2F%2Fpic12.secooimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648393567&t=cf53de27cff83997b72214216998553e"
            },
            {
                "text": "耐克短袖男",
                "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.szthks.com%2Flocalimg%2F687474703a2f2f6777312e616c6963646e2e636f6d2f62616f2f75706c6f616465642f69372f5431795064495844706858585858585858585f2121302d6974656d5f7069632e6a7067.jpg&refer=http%3A%2F%2Fwww.szthks.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648393543&t=c06cc91aa291cc7052bb67e97fe40e75"
            },
            {
                "text": "女耐克t恤休闲",
                "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2XttEdJcnBKNjSZR0XXcFqFXa_%21%211820816789.png_400x400.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648393540&t=d4e67a3b13b717a3b269949a193d2dca"
            },
            {
                "text": "NIKE女卫衣",
                "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.conslive.com%2Fpic%2Fnike%2Fdress%2Fa%2F25-893637-091.jpg&refer=http%3A%2F%2Fwww.conslive.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648393532&t=4162f8f08aea5362eb0d40a399e49677"
            },
            {
                "text": "NIKE板鞋",
                "imgs": "img/Recommend/dewu01.jpg"
            },
            {
                "text": "安踏篮球鞋",
                "imgs": "img/Recommend/dewu02.jpg"
            },
            {
                "text": "春风'250' 新款",
                "imgs": "img/Recommend/dewu04.jpg"
            },{
                "text": "OPPO X30",
            "imgs": "img/Recommend/dewu03.jpg"
            },{
                "text": "Disney 迪士尼 无线蓝牙",
            "imgs": "img/Recommend/dewu08.jpg"
            },{
                "text": "nike耐克官方舰店女鞋子",
                "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgfs17.gomein.net.cn%2FT1b0ALB_Av1RCvBVdK_800.jpg%3Fv%3D1&refer=http%3A%2F%2Fgfs17.gomein.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648018261&t=0283588aec91bcda55028295aa102e79"
            },{
                "text": "Nike 运动小黑鞋",
            "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FQmsMDe26c_h_KWHT-HR_cQ.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648018336&t=c1479f94675e86d2c1e193609d0a1311"

            },{
                "text": "nike-lebron soldier 10",
                "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012efa57303e5732f8755a5287c939.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648018062&t=8c44cc9ee6cba31526dbf2e8f07ae665"
            },{
                "text": "Nike lbj",
            "imgs": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F97756382aceb7154e30a30b6f377a66a4074026218d7b-hhf5JF_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648018082&t=ba49f9db97879801be4eae02b13307e9"
            },{
                "text":"李宁跑步鞋女鞋",
                "imgs":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi4%2F3853368935%2FO1CN01rkVy0n2FsHVMDFoXi_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648394058&t=32f25df175f01407ef3fba4198ce11d6"
            }
            ,{
                "text":"李宁全城5篮球鞋",
                "imgs":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqny.smzdm.com%2F202105%2F28%2F60b04bfef32cd2087.jpg_d250.jpg&refer=http%3A%2F%2Fqny.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648394164&t=26d141ca0b4ac99daa6c96b426c7b9c9"
            }
     ],
    };
  },
};
</script>

<style scoped>
.centext-right-son1{
    width: 30%;
    height: .8rem;
    text-align: center;
    margin-top: .4rem;
    font-size: .10rem;
    display: flex;
    flex-direction: column;
}
.centext-right-son1 img{
    width: 85%;
    height: 85%;
   
}
.centext-right{
    align-content: flex-start;
    justify-content: space-evenly;
    flex: 1;
    background: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: .1rem;
     padding-left: .1rem;
}
.centent-left {
  height: 100%;
  width: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.centext-son {
  width: 0.8rem;
  text-align: center;
  font-size: 0.15rem;
}
.centent {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.centent-top {
  width: 90%;
  height: 0.6rem;
  display: flex;
  line-height: 0.6rem;
  margin: auto;
}
.icon-zuojiantou {
  margin-right: 0.1rem;
}
.centent-centent {
  height: 100%;
  width: 100%;
  background: rgb(243, 241, 241);
  display: flex;
}
</style>